feat: add accessible element variant card and difficulty badge #62
Conversation
ronjalh
force-pushed
the
48-element-variant-card
branch
from
9f23af7 to
41097f6
Compare
|
|
||
| return ( | ||
| <span | ||
| role="img" |
There was a problem hiding this comment.
Having role="ing" on a container can confuse accessibility tools. Considering changing to using simply aria-label og title, like this:
<span
title={
value !== undefined
? Difficulty ${letter}, value ${value.toFixed(1)}
: Difficulty ${difficulty}
}
className="inline-flex shrink-0 flex-col items-center gap-1"
A role on the container hid the visible letter and value from screen readers. The badge now uses a title for the tooltip and a visually hidden "Difficulty" label, so the visible text is read as it is.
There was a problem hiding this comment.
Looks great! Just a tiny polish for screen readers:
We can remove the title attribute so mouse tooltips don't clutter the UI, and wrap "Difficulty " and "Value " in <span className="sr-only"> directly next to their respective values. That way, assistive tech reads "Difficulty A, Value 0.1" cleanly without double-announcing.
src/components/ui/card.tsx
Outdated
There was a problem hiding this comment.
Nice work!
Just one TypeScript fix needed in card.tsx: Make as optional in CardTitleProps (as?: 'h2' | 'h3' | 'h4') and set a fallback default like as: Heading = 'h3'. Otherwise, calling <CardTitle> without as throws a type check error across the rest of the codebase.
|
DifficultyBadge: Agreed and fixed. The CardTitle: I'd keep Generated with Claude Code |
Summary
Add reusable card primitives and an initial element-variant card with a difficulty badge.
What's in it
docs/AI_USAGE.md.Choices
Reuse the existing design tokens and the backend's documented A–J values (
0.1–1.0). Keep this first card static while the catalog integration is developed.Testing
git diff --checkpassed.npm run buildis pending PR feat: expose design tokens as Tailwind utilities #61, which adds the Tailwind utilities used here.Not done (still open)
Part of #48
Generated with GitHub Copilot